<template>
  <div>
    <div>
      <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="150px" style="background-color: rgb(238, 241, 246)">
          <el-container>
            <el-header style="text-align: left; font-size: 16px">房间信息</el-header>
            <el-tree style="background-color: rgb(238, 241, 246);" :data="tree" :props="defaultProps"
                     @node-click="handleNodeClick" highlight-current></el-tree>
          </el-container>
        </el-aside>

        <el-container>
          <el-header style="text-align: left; font-size: 16px">
            <span>设备状态</span>
          </el-header>
          <el-main style="padding: 0px">
            <el-container >
              <el-header style="background-color: #eeeeee">
                <div>
                  <el-button plain @click="dialogRoomFormOpen">设置房态</el-button>
                  <el-button plain @click="dialogMessageOpen">查看消息</el-button>
                  <el-button plain @click="dialogLampConstrOpen">灯光控制</el-button>
                  <el-button plain @click="dialogAirConstrOpen">空调设置</el-button>
                  <div>
                    <el-dialog title="房态设置" :visible.sync="dialogFormVisible" show-close center modal >
                      <el-form :model="setRoomStatsForm">
                        <el-form-item label="房态" :label-width="formLabelWidth">
                          <el-select v-model="setRoomStatsForm.stats" placeholder="请选择房态">
                            <el-option v-for="item in setRoomStatsOptions" :key="item.id" :label="item.label" :value="item.stats"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="callbackRoomStats">取 消</el-button>
                        <el-button type="primary" @click="setRoomStats">确 定</el-button>
                      </div>
                    </el-dialog>
                  </div>
                  <div>
                    <el-dialog title="信息" :visible.sync="dialogTableVisible">
                      <el-table :data="roomMessage">
                        <el-table-column property="room" label="房间" width="150"></el-table-column>
                        <el-table-column property="message" label="消息" width="200"></el-table-column>
                        <el-table-column property="time" label="时间"></el-table-column>
                      </el-table>
                    </el-dialog>
                  </div>
                  <div>
                    <el-dialog title="灯光控制" :visible.sync="dialogLampConstrFormVisible">
                      <el-form :model="form">
                        <el-form-item label="活动名称" :label-width="formLabelWidth">
                          <el-input v-model="form.name" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="活动区域" :label-width="formLabelWidth">
                          <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogLampConstrFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogLampConstrFormVisible = false">确 定</el-button>
                      </div>
                    </el-dialog>
                  </div>
                  <div >
                    <el-dialog id="airConstrFormVisible" lock-scroll title="空调控制" :visible.sync="dialogAirConstrFormVisible">
                      <div>
                        <el-scrollbar wrapClass="scrollbar-wrap" :style="{height: scrollHeight}" ref="scrollbarContainer">
                          <div id="airConstrFormVisibleDiv">
                            <el-row :gutter="40">
                              <el-col :span="10">
                                <div class="grid-content bg-purple">
                                  <el-card :body-style="{ padding: '10px' }">
                                    <div slot="header" class="clearfix">
                                      <span>节能及换季设定</span>
                                    </div>
                                    <el-form :model="energyChangeform">
                                      <el-form-item label="房间节能" :label-width="formLabelWidth">
                                        <el-select v-model="energyChangeform.room" placeholder="请选择">
                                          <el-option v-for="item in energyChangeRooms" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="空调节能" :label-width="formLabelWidth">
                                        <el-select v-model="energyChangeform.air" placeholder="请选择">
                                          <el-option v-for="item in energyChangeAirs" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="冷热模式" :label-width="formLabelWidth">
                                        <el-select v-model="energyChangeform.coldHot" placeholder="请选择">
                                          <el-option v-for="item in energyChangeColdHots" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="新风模式" :label-width="formLabelWidth">
                                        <el-select v-model="energyChangeform.fresh" placeholder="请选择">
                                          <el-option v-for="item in energyChangeFreshs" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="节能温度" :label-width="formLabelWidth">
                                        <el-select v-model="energyChangeform.temp" placeholder="请选择">
                                          <el-option v-for="item in energyChangeTemps" :key="item" :label="item" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="节能风速" :label-width="formLabelWidth">
                                        <el-select v-model="energyChangeform.wind" placeholder="请选择">
                                          <el-option v-for="item in energyChangeWinds" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="快速温度" :label-width="formLabelWidth">
                                        <el-select v-model="energyChangeform.tempFest" placeholder="请选择">
                                          <el-option v-for="item in energyChangeTempFests" :key="item" :label="item" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="快速风速" :label-width="formLabelWidth">
                                        <el-select v-model="energyChangeform.windFest" placeholder="请选择">
                                          <el-option v-for="item in energyChangeWindFests" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                    </el-form>
                                    <el-button type="text" class="button" @click="energyChangeformClick">下载</el-button>
                                  </el-card>
                                </div>
                              </el-col>
                              <el-col :span="10">
                                <div class="grid-content bg-purple">
                                  <el-card :body-style="{ padding: '10px' }">
                                    <div slot="header" class="clearfix" style="align-content: center">
                                      <span>空调温度及风速锁定设置</span>
                                    </div>
                                    <el-form :model="airTempform">
                                      <el-form-item label="设置温度" :label-width="formLabelWidth">
                                        <el-select v-model="airTempform.desTemp" placeholder="请选择">
                                          <el-option v-for="item in airTempDesTemps" :key="item" :label="item" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="空调风速" :label-width="formLabelWidth">
                                        <el-select v-model="airTempform.windSpeed" placeholder="请选择">
                                          <el-option v-for="item in airTempWindSpeeds" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="辅助加热" :label-width="formLabelWidth">
                                        <el-select v-model="airTempform.heatingEff" placeholder="请选择">
                                          <el-option v-for="item in airTempHeatingEffs" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="冷热模式" :label-width="formLabelWidth">
                                        <el-select v-model="airTempform.coldHot" placeholder="请选择">
                                          <el-option v-for="item in airTempColdHots" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="设置类型" :label-width="formLabelWidth">
                                        <el-select v-model="airTempform.lock" placeholder="请选择">
                                          <el-option v-for="item in airTempLocks" :key="item.id" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                      </el-form-item>
                                    </el-form>
                                    <el-button type="text" class="button" @click="airTempformClick">下载</el-button>
                                  </el-card>
                                </div>
                              </el-col>
                            </el-row>
                            <el-row :gutter="40">
                              <el-col :span="10">
                                <div class="grid-content bg-purple">
                                  <el-card :body-style="{ padding: '10px' }">
                                    <div slot="header" class="clearfix">
                                      <span>时间参数A</span>
                                    </div>
                                    <el-form :model="timeParamAform">
                                      <el-form-item label="房间节能" :label-width="formLabelWidth">
                                        <el-select v-model="timeParamAform.room" placeholder="请选择">
                                          <el-option v-for="item in timeParamARooms" :key="item" :label="item+'分钟'" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="卫生间节能" :label-width="formLabelWidth">
                                        <el-select v-model="timeParamAform.toilet" placeholder="请选择">
                                          <el-option v-for="item in timeParamAToilets" :key="item" :label="item+'分钟'" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="停抽时间" :label-width="formLabelWidth">
                                        <el-select v-model="timeParamAform.stop" placeholder="请选择">
                                          <el-option v-for="item in timeParamAStops" :key="item" :label="item+'分钟'" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="抽风时间" :label-width="formLabelWidth">
                                        <el-select v-model="timeParamAform.exhaust" placeholder="请选择">
                                          <el-option v-for="item in timeParamAExhausts" :key="item" :label="item+'分钟'" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                    </el-form>
                                    <el-button type="text" class="button" @click="timeParamAformClick">下载</el-button>
                                  </el-card>
                                </div>
                              </el-col>
                              <el-col :span="10">
                                <div class="grid-content bg-purple">
                                  <el-card :body-style="{ padding: '10px' }">
                                    <div slot="header" class="clearfix">
                                      <span>时间参数B</span>
                                    </div>
                                    <el-form :model="timeParamBform">
                                      <el-form-item label="夜间时间" :label-width="formLabelWidth">
                                        <el-select v-model="timeParamBform.night" placeholder="请选择">
                                          <el-option v-for="item in timeParamBNights" :key="item" :label="item+'点'" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="白天时间" :label-width="formLabelWidth">
                                        <el-select v-model="timeParamBform.day" placeholder="请选择">
                                          <el-option v-for="item in timeParamBDays" :key="item" :label="item+'点'" :value="item"></el-option>
                                        </el-select>
                                      </el-form-item>
                                    </el-form>
                                    <el-button type="text" class="button" @click="timeParamBformClick">下载</el-button>
                                  </el-card>
                                </div>
                              </el-col>
                            </el-row>
                          </div>
                        </el-scrollbar>
                      </div>
                    </el-dialog>
                  </div>
                </div>
              </el-header>
              <el-main>
                <div>
                  <el-table  :data="tableData" highlight-current-row stripe style="width: 100%" @current-change="handleSelectionChange">
                    <el-table-column prop="roomNum" label="房间" ></el-table-column>
                    <el-table-column prop="name" label="状态" ></el-table-column>
                    <el-table-column prop="haveOne" label="有无人"></el-table-column>
                    <el-table-column prop="close" label="房门" ></el-table-column>
                    <el-table-column prop="card" label="插卡" ></el-table-column>
                    <el-table-column prop="clean" label="清理"></el-table-column>
                    <el-table-column prop="unDisturb" label="勿扰" ></el-table-column>
                    <el-table-column prop="name" label="服务" ></el-table-column>
                    <el-table-column prop="checkOut" label="退房"></el-table-column>
                    <el-table-column prop="sos" label="SOS" ></el-table-column>
                    <el-table-column prop="name" label="房间温度" ></el-table-column>
                    <el-table-column prop="preTemp" label="空调温度"></el-table-column>
                    <el-table-column prop="mode" label="空调模式" >
                      <template slot-scope="scope">
                        <el-tag type="success" effect="dark" v-if="scope.row.mode == 0">制冷</el-tag>
                        <el-tag type="warning" effect="dark" v-if="scope.row.mode == 1">制热</el-tag>
                        <el-tag type="danger" effect="dark" v-if="scope.row.mode == 2">换气</el-tag>
                        <el-tag type="danger" effect="dark" v-if="scope.row.mode == 3">除湿</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="空调风速" ></el-table-column>
                    <el-table-column prop="auth" label="授权"></el-table-column>
                    <el-table-column prop="address" label="功耗"></el-table-column>
                  </el-table>
                </div>
              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                tableData: [],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    id:"id",
                    type:"type"
                },
                tree:[],
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogLampConstrFormVisible: false,
                dialogAirConstrFormVisible: false,
                setRoomStatsForm: {
                    label: '',
                    stats: ''
                },
                formLabelWidth: '85px',
                setRoomStatsOptions: [
                    {
                    stats: 1,
                    id: 1,
                    label: "出租房"
                },{
                    stats: 2,
                    id: 2,
                    label: "待租房"
                },{
                    stats: 3,
                    id: 3,
                    label: "停房"
                },{
                    stats: 4,
                    id: 4,
                    label: "维修房"
                }],
                roomMessage: [],
                multipleTable: [],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                energyChangeform: {
                    room: "",
                    air: "",
                    coldHot: "",
                    fresh: "",
                    temp: "",
                    wind: "",
                    tempFest: "",
                    windFest:""
                },
                airTempform: {
                    desTemp: "",
                    windSpeed: "",
                    heatingEff: "",
                    coldHot: "",
                    lock:""
                },
                energyChangeRooms: [
                    {
                        value: 0,
                        id: 0,
                        label: "关闭"
                    },{
                        value: 1,
                        id: 1,
                        label: "打开"
                    }
                ],
                energyChangeAirs: [
                    {
                        value: 0,
                        id: 0,
                        label: "关闭"
                    },{
                        value: 1,
                        id: 1,
                        label: "打开"
                    }
                ],
                energyChangeColdHots: [
                    {
                        value: 0,
                        id: 0,
                        label: "制冷"
                    },{
                        value: 1,
                        id: 1,
                        label: "制热"
                    },{
                        value: 2,
                        id: 2,
                        label: "换气"
                    }
                ],
                energyChangeFreshs: [
                    {
                        value: 0,
                        id: 0,
                        label: "独立"
                    },{
                        value: 1,
                        id: 1,
                        label: "混合"
                    }
                ],
                energyChangeTemps:[
                    16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
                ],
                energyChangeTempFests:[
                    16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
                ],
                energyChangeWinds: [
                    {
                        value: 0,
                        id: 0,
                        label: "停止"
                    },{
                        value: 1,
                        id: 1,
                        label: "低速"
                    },{
                        value: 2,
                        id: 2,
                        label: "中速"
                    },{
                        value: 3,
                        id: 3,
                        label: "高速"
                    }
                ],
                energyChangeWindFests:[
                    {
                        value: 0,
                        id: 0,
                        label: "停止"
                    },{
                        value: 1,
                        id: 1,
                        label: "低速"
                    },{
                        value: 2,
                        id: 2,
                        label: "中速"
                    },{
                        value: 3,
                        id: 3,
                        label: "高速"
                    }
                ],
                airTempDesTemps: [
                    16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
                ],
                airTempWindSpeeds: [
                    {
                        value: 0,
                        id: 0,
                        label: "停止"
                    },{
                        value: 1,
                        id: 1,
                        label: "低速"
                    },{
                        value: 2,
                        id: 2,
                        label: "中速"
                    },{
                        value: 3,
                        id: 3,
                        label: "高速"
                    },{
                        value: 4,
                        id: 4,
                        label: "自动"
                    },{
                        value: 5,
                        id: 5,
                        label: "停止"
                    }
                ],
                airTempHeatingEffs:[
                    {
                        value: 0,
                        id: 0,
                        label: "打开"
                    },{
                        value: 1,
                        id: 1,
                        label: "启动"
                    },{
                        value: 2,
                        id: 2,
                        label: "无效"
                    }
                ],
                airTempColdHots:[
                    {
                        value: 0,
                        id: 0,
                        label: "制冷"
                    },{
                        value: 1,
                        id: 1,
                        label: "制热"
                    },{
                        value: 2,
                        id: 2,
                        label: "换气"
                    },{
                        value: 3,
                        id: 3,
                        label: "无效"
                    }
                ],
                airTempLocks: [
                    {
                        value: 0,
                        id: 0,
                        label: "设定"
                    },{
                        value: 1,
                        id: 1,
                        label: "锁定"
                    },{
                        value: 2,
                        id: 2,
                        label: "解锁"
                    }
                ],
                currentDate: new Date(),
                scrollHeight: '100%',
                timeParamAform:{
                    room: "",
                    toilet:"",
                    stop:"",
                    exhaust:""
                },
                timeParamARooms:[
                    1, 5, 10, 15, 20, 25, 30
                ],
                timeParamAToilets:[
                    1, 5, 10, 15, 20, 25, 30
                ],
                timeParamAStops:[
                    1, 5, 10, 15, 20, 25, 30
                ],
                timeParamAExhausts:[
                    1, 5, 10, 15, 20, 25, 30
                ],
                timeParamBform:{
                    night:"",
                    day:""
                },
                timeParamBNights:[
                    16, 17, 18, 19, 20, 21
                ],
                timeParamBDays:[
                    5, 6, 7, 8, 9, 10, 11, 12
                ]
            }
        },
        sockets: {
            connect: function () {
                console.log('socket connected');
            },
            enewbuy: function (data, res) {
                let da = JSON.parse(JSON.stringify(data)) ;
                let tab = this.tableData;
                tab.forEach(ta => {
                    if (ta.roomId === da.roomId){
                        ta.roomNum = da.roomBoxInfos[0].roomNum;
                        ta.haveOne = da.baseInfos[0].haveOne;
                        ta.close = da.baseInfos[0].close;
                        ta.card = da.baseInfos[0].card;
                        ta.clean = da.baseInfos[0].clean;
                        ta.unDisturb = da.baseInfos[0].unDisturb;
                        ta.checkOut = da.baseInfos[0].checkOut;
                        ta.sos = da.baseInfos[0].sos;
                        ta.preTemp = da.airInfos[0].preTemp + "℃";
                        ta.mode = da.airInfos[0].mode;
                        ta.auth = da.baseInfos[0].auth;
                        ta.auth = da.baseInfos[0].auth;
                        this.setRoomStatsForm.stats = 1;
                        return false;
                    }
                });
                this.$set(this.tableData, tab);
            },
            enewbuys: function (data, res) {
                this.tableData = [];
                let das = JSON.parse(JSON.stringify(data)) ;
                das.forEach(da => {
                    let ta = {};
                    ta.roomId = da.roomId;
                    ta.roomNum = da.roomBoxInfos[0].roomNum;
                    ta.haveOne = da.baseInfos[0].haveOne;
                    ta.close = da.baseInfos[0].close;
                    ta.card = da.baseInfos[0].card;
                    ta.clean = da.baseInfos[0].clean;
                    ta.unDisturb = da.baseInfos[0].unDisturb;
                    ta.checkOut = da.baseInfos[0].checkOut;
                    ta.sos = da.baseInfos[0].sos;
                    ta.preTemp = da.airInfos[0].preTemp + "℃";
                    ta.mode = da.airInfos[0].mode;
                    ta.auth = da.baseInfos[0].auth;
                    ta.auth = da.baseInfos[0].auth;
                    this.setRoomStatsForm.stats = 1;
                    this.tableData.push(ta);
                })
            }
        },
        mounted(){
          this.init();
          this.scrollHeight = window.innerHeight*0.7 + 'px';
        },
        methods: {
            init(){
                let self = this;
                this.$ajax.get('http://127.0.0.1:8081/web/hotel')
                    .then(function (response) {
                        if (response.data.statusCode === 2000){
                            let hotels = [];
                            response.data.hotelInfos.forEach(item => {
                                let hotel = {};
                                let buids = [];
                                hotel.id = item.hotelId;
                                hotel.name = item.hotelName;
                                hotel.type =  'hotel';
                                item.buildInfos.forEach(build => {
                                    let buid = {};
                                    buid.id = build.buildId;
                                    buid.name = build.buildNum;
                                    buid.type =  'build';
                                    let las = [];
                                    build.layerInfos.forEach(layer => {
                                        let la = {};
                                        la.id = layer.layerId;
                                        la.name = layer.layerNum;
                                        la.type = "layer";
                                        las.push(la);
                                    })
                                    buid.children = las;
                                    buids.push(buid);
                                })
                                hotel.children = buids;
                                hotels.push(hotel);
                            })
                            self.tree = hotels;
                        }else {
                            alert(response.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            clickButton: function () {
                var msg = this.notedata;
                console.log(msg);
                this.$socket.emit('messageevent', msg);
            },
            handleNodeClick(data) {
                if (data.type === 'layer'){
                    this.$socket.emit('selectRooms', data.id);
                }
            },
            lampConstr() {
                this.$alert('这是一段内容', '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
            },
            readMessage() {
                this.$alert('这是一段内容', '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
            },
            airConstr(){
                this.$alert('这是一段内容', '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
            },
            setRoomStats(){
                this.dialogFormVisible = false;
                console.log("设置房态为:" + this.setRoomStatsForm.stats );
                this.setRoomStatsForm.stats = "";
            },
            callbackRoomStats(){
                this.dialogFormVisible = false;
                this.setRoomStatsForm.stats = "";
            },
            handleSelectionChange(value){
                this.multipleTable = value;
            },
            dialogRoomFormOpen(){
                if (this.multipleTable == null ||  this.multipleTable.length <= 0){
                    this.$message('请选择房间');
                }else {
                    this.dialogFormVisible = true;
                }
            },
            dialogMessageOpen(){
                if (this.multipleTable == null ||  this.multipleTable.length <= 0){
                    this.$message('请选择房间');
                }else {
                    this.dialogTableVisible = true;
                }
            },
            dialogLampConstrOpen(){
                if (this.multipleTable == null ||  this.multipleTable.length <= 0){
                    this.$message('请选择房间');
                }else {
                    this.dialogLampConstrFormVisible = true;
                }
            },
            dialogAirConstrOpen(){
                if (this.multipleTable == null ||  this.multipleTable.length <= 0){
                    this.$message('请选择房间');
                }else {
                    this.dialogAirConstrFormVisible = true;
                }
            },
            timeParamAformClick(){
                console.log(this.timeParamAform);
            },
            timeParamBformClick(){
                console.log(this.timeParamBform);
            },
            energyChangeformClick(){
                console.log(this.energyChangeform);
            },
            airTempformClick(){
                console.log(this.airTempform);
            }
        }
    }
</script>

<style>
  /* @import url("//unpkg.com/element-ui@2.0.11/lib/theme-chalk/index.css");*/
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-tree{
    color: #333;
  }

  .el-aside {
    color: #333;
  }

  .current-row > td {
    background: rgba(0, 158, 250, 0.219) !important;
  }

  .el-tree-node:focus > .el-tree-node__content {
    background: rgba(0, 158, 250, 0.219) !important;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .el-card{
    background-color: #eeeeee;
    width: auto;
  }

  .el-scrollbar {
    height: 100%;
  }

  .scrollbar-wrap{
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .el-scrollbar__bar{

  }

  .el-row{
    padding-top: 2.5%;
    padding-bottom: 2.5%;
  }

  .el-col{
    width: 47%
  }

  #airConstrFormVisible{
    padding-top: 0
  }

  #airConstrFormVisibleDiv{
    padding-left: 2.7%;
    padding-right: 2.7%;
  }

  .el-dialog__body{
    padding-top: 0px;
  }

</style>
